<template>
  <q-dialog  v-model="registerDialogVisible">
    <QRAliasForm :mode="'create'" @update="init"></QRAliasForm>
  </q-dialog>

  <q-dialog  v-model="editDialogVisible">
    <QRAliasForm :mode="'edit'" :id="editedRow.id" @update="init"></QRAliasForm>
  </q-dialog>
  
  <div class="q-pa-sm report-style">
    <div class="q-gutter-y-md">
      <q-table
        class="card-radius my-table"
        wrap-cells
        flat
        bordered
        :columns="columns"
        :rows="filterRows"
        :pagination="{ rowsPerPage: 15 }"
        row-key="id"
        no-data-label="No asset found."
        no-results-label="The filter didn't uncover any results"
        @row-dblclick="dblclickFn"
      >
        <template v-slot:top>
          <div class="row justify-between" style="width: 100%">
            <div class="fal page-header">QR Code Alias Master</div>
            <div>
              <q-card-actions>
                <q-btn
                  label="create"
                  class="default-btn"
                  @click="openRegisterDialog()"
                />
              </q-card-actions>
            </div>
          </div>
        </template>
        <template v-slot:top-row="props">
          <ColsFilter :filter="props.cols" ref="colsFilter"></ColsFilter>
        </template>

        <template v-slot:body-cell-type="props">
          <q-td :props="props">
            <div class="text-left">
              <q-chip :label="props.row.cur_tab ? 'Current AssetRelation' : '' " square v-if="props.row.cur_tab">
              </q-chip>
              <q-chip :label="props.row.final_tab ? 'Final Check' : ''" square v-if="props.row.final_tab">
              </q-chip>
            </div>
          </q-td>
        </template>

        <template v-slot:body-cell-actions="props">
          <q-td :props="props">
            <!-- <q-card-actions > -->
              <q-btn
                dense
                round
                flat
                class="edit-btn"
                icon="edit"
                @click.stop="openEditDialog(props.row)"
              ></q-btn>
              <q-btn
                dense
                round
                flat
                class="del-btn"
                @click="deleteFn(props.row.id)"
                icon="delete"
              ></q-btn>
            <!-- </q-card-actions> -->

          </q-td>
        </template>

        <template v-slot:no-data="{ icon, message }">
          <div class="full-width row flex-center text-accent q-gutter-sm">
            <!-- <q-icon size="2em" name="sentiment_dissatisfied" /> -->
            <q-icon size="2em" :name="icon" />
            <span> {{ message }} </span>
          </div>
        </template>
      </q-table>
    </div>
  </div>


</template>

<script setup lang="ts">
import { QTableColumn, useQuasar } from 'quasar';
import {  AssetRelation } from 'src/services/type';
import { computed, ref } from 'vue';

import QRAliasForm from 'src/components/qrAliasMaster/QRAliasForm.vue'
import ColsFilter from 'src/components/table/ColsFilter.vue';
import { getAssets, softDeleteAssetRelation } from 'src/services/eqipmentService';
import { deleteQrFormat, listqrmap } from 'src/services/qrMapService';

const $q = useQuasar()

const editedRow = ref();
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);
const registerDialogVisible = ref(false);

const colsFilter = ref<typeof ColsFilter>();

function openRegisterDialog() {
  registerDialogVisible.value = true;
}

function openEditDialog(row: AssetRelation) {
  editedRow.value = { ...row };
  editDialogVisible.value = true;
}

function dblclickFn(evt: any, row: AssetRelation, index: number) {
  editedRow.value = { ...row };
  editDialogVisible.value = true;
}


function deleteFn(id: number) {
  $q.dialog({
    title: 'Confirm',
    message: 'Are you sure to delete this record?',
    cancel: true,
  }).onOk(async () => {
    const res = await deleteQrFormat(id);
    if (res) {
      $q.notify({
        message: 'Success',
        color:'positive'
      })
      init();
    }
  });
}

const align = 'left';

const columns = [
  /* {
    name: 'id',
    label: '#',
    field: 'id',
    sortable: true,
    search: false,
    align,
  }, */
  {
    name: 'qr_string',
    label: 'QR Text',
    field: 'qr_string',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'stock_code',
    label: 'Stock Code',
    field: 'stock_code',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'actions',
    label: 'Actions',
    field: 'actions',
    search: false,
    align,
  },
];

const rows = ref([]);

async function init() {
  const res = await listqrmap();
  if (res) {
    rows.value = res.data;

  }
  editDialogVisible.value = false;
  deleteDialogVisible.value = false;
  registerDialogVisible.value = false;
}

const filterRows = computed(() => {
  return rows.value?.filter(filterFn);
});

function filterFn(row: AssetRelation) {
  if (colsFilter.value) {
    return colsFilter.value.filterFn(row);
  }
}

init();
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-between;
  background-color: #eef4fa;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 10px;
}

.warning {
  color: red;
  font-weight: bold;
  text-align: center;
  width: -webkit-fill-available;
  padding-top: 20px;
}

th,
td {
  text-align: left;
  padding: 10px;
}

.row-bg {
  background-color: #d9d9d9;
}

.row-bg-light {
  background-color: #eeeded;
}
</style>
